<template>
    <div class="jumbotron text-center">
        <h1 class="display-4 title2">Hey, mate!</h1>
        <p class="lead display-4">Welcome to Cloud Accounting. Now Let's Go!</p>
        <hr class="my-4">
        <p>
            <span v-show="loginUser.id">Hi, {{loginUser.name}}</span>
            欢迎来到云记账
        </p>
        <a v-show="!loginUser.id" class="btn btn-primary btn-lg" href="javascript:void(0)" role="button" @click="openLoginModal()">
            请先登录
        </a>
        <div v-show="loginUser.id" >

            <router-link to="/cost" class="btn btn-primary btn-lg" style="margin-right: 10px" role="button">
                前往记录支出
            </router-link>
            <router-link to="/income" class="btn btn-primary btn-lg" role="button">
                前往记录收入
            </router-link>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                loginUser: {}
            }
        },
        mounted() {
            let _this = this;
            _this.loginUser = Tool.getLoginUser();
            _this.$event.$on("getLoginUser", function () {
                _this.loginUser = Tool.getLoginUser();
            })
            if(Tool.isNotEmpty(_this.loginUser)){
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/user/get-login-user/' + _this.loginUser.token).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        let loginUser = resp.content;
                        if(loginUser === null){
                            _this.loginUser = {};
                        }
                    }
                })
            }
        },
        methods: {
            openLoginModal() {
                let _this = this;
                _this.$parent.$parent.$refs.header.openLoginModal();
            }
        }
    }
</script>

<style scoped>
.title1{
    /*margin-bottom: 2rem;*/
    color: #aaaaaa;
    letter-spacing: 0;
    text-shadow: 0 1px 0 #999, 0 2px 0 #888, 0 3px 0 #777, 0 4px 0 #666, 0 5px 0 #555, 0 6px 0 #444, 0 7px 0 #333, 0 8px 7px #001135;
    /*font-size: 2rem;*/
}
.title2{
    color: transparent;
    -webkit-text-stroke: 1px black;
    letter-spacing: 0.04em;
}
</style>